<template>
  <n-modal v-model:show="isVisible" title="添加客户" preset="dialog" @close="onClose" @update:show="onClose" style="height: 400px;width: 400px">
    <n-form @submit.prevent="handleSubmit" label-width="120px" class="form-container">
      <div class="form-row" style="margin-top: 20px">
        <n-form-item label="用户名：" path="categoryId">
        <n-input v-model:value="form.username"
               placeholder="请输入用户名"
        ></n-input>
        </n-form-item>
        <n-form-item style="margin-left: 10px" label="姓名">
          <n-input v-model:value="form.name"
                   placeholder="请输入姓名"></n-input>
        </n-form-item>
      </div>

        <div class="form-row">
            <n-form-item label="电话："  >
                <n-input v-model:value="form.phone" placeholder="请输入电话"/>
            </n-form-item>
            <n-form-item label="国家：" style="margin-left: 10px">
                <n-select v-model:value="form.nation"
                          :options="nationOption"
                          style="width: 185px;"
                          placeholder="选择国家"
                ></n-select>
            </n-form-item>
        </div>
        <div class="form-row">
            <n-form-item label="地址：">
                <n-input v-model:value="form.address" placeholder="请输入地址" style="width: 450px;"/>
            </n-form-item>
        </div>

      <!-- 提交按钮 -->
      <div class="submit-row">
        <n-form-item>
          <n-button type="primary" native-type="submit" @click="handleSubmit">提交</n-button>
        </n-form-item>
      </div>
    </n-form>
  </n-modal>
</template>

<script setup>
import {ref, watch} from 'vue';
import {useUserStore} from "@/store/index.js";
import api from '@/api/admin.js'
import {List} from "echarts";

const userStore = useUserStore()
const id = userStore.getId();
const option = ref([
])
function handleChange(value) {
}
const emit = defineEmits(['updatePage'])
const props = defineProps({
  show: {
    type: Boolean,
    required: true,
  },
  onClose: {
    type: Function,
    required: true,
  },
  option: {
    type: List,
    require: true
  }
});

const isVisible = ref(props.show);
watch(() => props.show, (newVal) => {
  isVisible.value = newVal;
});
const nationOption = [
	{
		label: "中国",
		value: "中国"
	},
	{
		label: "美国",
		value: "美国"
	},
	{
		label: "英国",
		value: "英国"
	},
	{
		label: "意大利",
		value: "意大利"
	},
	{
		label: "法国",
		value: "法国"
	},
	{
		label: "巴西",
		value: "巴西"
	},
]
const form = ref({
  username:'',
  name:'',
  phone:'',
  address:'',
  nation: ""
});

const handleSubmit = async () => {
  try {
    const res = await api.addCustomer(
        {
          ...form.value,
        }
    )
    if(res.code === 200) {
      emit("updatePage")
    }
    else {
      $message.error(res.message)
    }
  } catch (err) {
    $message.error("添加失败！")
  }finally{
    clear()
    props.onClose();
  }
};
const clear = () => {
  form.value.username="",
  form.value.name = ""
  form.value.phone=""
  form.value.address=""
}
</script>

<style scoped>
.form-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
}

.form-row {
  display: flex;
  align-items: center;
  width: 100%;
}

.form-row > n-form-item {
  flex: 1;
}

.submit-row {
  justify-content: center;
  display: flex;
  width: 100%;
}
</style>
